import React, { useEffect, useState } from 'react';
import { Outlet, useLocation } from "react-router-dom"
import MyMenu from '@/components/MyMenu';
import { Breadcrumb, Layout, theme } from 'antd';
import { BeforRouterEnter } from '@/routers';

const { Header, Content, Footer } = Layout;

const Home: React.FC = () => {
  const currentRoute = useLocation()
  const [breadcrumbItem,setBreadcrumbItem] = useState<{}[]>([])
  useEffect(()=>{
    const map:{title:string}[] = [];
    currentRoute.pathname.split('/').forEach((item: string) => {
      if (item) {
        map.push({
          title: item
        })
      }
    })
    setBreadcrumbItem(map)
  },[])
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <MyMenu/>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
          <Breadcrumb style={{ margin: '25px' }}  items={breadcrumbItem}/>
        </Header>
        <Content style={{ margin: '16px 16px 0 16px' }}>
          <div
            style={{
              padding: 24,
              minHeight: 360,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {/* <Outlet/> */}
            <BeforRouterEnter/>
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Home;